<template>
	<view class="content">
		<view class="top">
			<view class="navbar" :style="{ height: navBarHeight + 'px' }"><text style="font-size: 36upx;">星城校园</text></view>
			<image src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E7%BB%84%201042.png" mode=""></image>
		</view>
		<view>
			<m-swiper :list="banner" :previousMargin="20" :nextMargin="20" ></m-swiper>
			<!-- <m-ad :list="adList"></m-ad> -->
			<template><!--v-if="hasLogin == false || (hasLogin && userInfo.memberRole == 0)"-->
				<view class="notice dev-box" >
					<yzb-notice   :list="noticeList" theKey="title" :showIcon="true" :showMore="true" @goItem="goItem" @goMore="goMore"></yzb-notice>
				</view>
				<view class="dev-box">
					<yzb-grid :columnNum="4" :data="grid" show-border="false" @click="handleClickGrid"></yzb-grid>
				</view>
				
				<view class="title"><view class="bl"></view>每日兼职</view>
				<view >
					<yzb-position listType="0" :positions="list" @click="positionDetail"></yzb-position>
				</view>
				
			</template>
			<view class="load-more-box">
				<uni-load-more v-if="status == '请求中'" status="正在加载..." :showIcon="true"></uni-load-more>
				<uni-load-more v-if="status == '没有更多'" status="没有更多了" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '暂无数据'" status="暂无数据" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '请求失败'" status="加载失败，点我重试" :showIcon="false" @click="reLoad"></uni-load-more>
			</view>
			<uni-popup ref="popup" type="center">
				<view style="background-color:white;width:80%;margin: 0 auto;padding:40upx;border-radius: 15upx;">
					<view class="popupTitle" style="line-height:48upx;font-size:30upx;font-weight: bold;color:#26c947;"><image src="/static/img/msg.png" style="width:48upx;height:48upx;margin-right:12upx;vertical-align: sub;"></image>{{noticeList[0].title}}</view>
					<bctos-rich-text :nodes="noticeList[0].content"></bctos-rich-text>
					<button @click="close" style="background-color: #26c947;color:white;border-radius: 30upx;">确认</button>
				</view>
				
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import mSwiper from '@/components/m-swiper/m-swiper.vue';
import yzbPosition from '@/components/yzb/yzb-position.vue';
import yzbGrid from '@/components/yzb/yzb-grid.vue';
import IMService from '@/lib/imservice';
import amap from '@/common/amap-wx.js';
export default {
	components: {
		mSwiper,
		yzbPosition,
		yzbGrid
	},
	computed: {
		...mapState(['userInfo']),
		...mapGetters(['hasLogin'])
	},
	data() {
		return {
			statusBarHeight: 0,
			navBarHeight: 0,
			topHeight: 0,

			status: '',
			query: {
				current: 1,
				number: 10,
				longitude: '',
				latitude:''
			},
			banner: [],
			msgIcon:this.$mAssetsPath.msgIcon,
			grid: [
				{
					image: this.$mAssetsPath.grid_1,
					text: '闲置广场',
					path: this.$mRoutesConfig.idleSquare,
					type: 1
				},
				// {
				// 	image: this.$mAssetsPath.grid_1,
				// 	text: '闲置广场',
				// 	path: "",
				// 	type: 1
				// },
				{
					image: this.$mAssetsPath.grid_2,
					text: '商家入驻',
					path: this.$mRoutesConfig.checkIn,
					type: 2
				},
				{
					image: this.$mAssetsPath.grid_3,
					text: '分享好友',
					path: this.$mRoutesConfig.proxyIntro,
					type: 3
				},
				{
					image: this.$mAssetsPath.grid_4,
					text: '校园库',
					path: "",
					type: 4
				},
				{
					image: this.$mAssetsPath.grid_5,
					text: '校园树洞',
					path: "",
					type: 5
				},
				{
					image: this.$mAssetsPath.grid_6,
					text: '青腾未来',
					path: "",
					type: 6
				},
				{
					image: this.$mAssetsPath.grid_7,
					text: '发现兼职',
					path: this.$mRoutesConfig.findJob,
					type:7
				},
				{
					image: this.$mAssetsPath.grid_8,
					text: '新人帮助',
					path: this.$mRoutesConfig.kf,
					type: 8
				},
			],
			ka: [],
			adList: [],
			postList: [],
			JobExpectList: [],
			list: [],

			key: '102dcab15e743584f73d383dea7530e7', //高德地图key
			location: undefined, //定位信息

			loadStatus: 'loading', //loading、fail、success
			noticeList: []
		};
	},
	created() {
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		//#ifdef MP-WEIXIN
		this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
		this.topHeight = this.navBarHeight + uni.upx2px(80);
		//#endif
	},
	onLoad(query) {
		
		this.getBanners();
		this.locationAuth();
		
		
		
		
	},
//发送给朋友
    onShareAppMessage(res) {
		let that = this
		if(!this.hasLogin){
			uni.showToast({
				title: '请先登录，再分享',
				icon: 'none'
			})
			return false;
		}
		return {
			title: "找兼职/找工作，海量岗位放心选",
			path: "/pages/index/index?pcode="+that.userInfo.pcode,
			imageUrl: "https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/banner/%E7%94%BB%E6%9D%BF%203.png",
			success(res) {
				console.log('success(res)==', res);
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				console.log('fail(res)==', res);
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
    },
    //分享到朋友圈
    onShareTimeline(res) {
		let that = this
	return {
		title: "找兼职/找工作，海量岗位放心选",
		path: "/pages/index/index?pcode="+that.userInfo.pcode,
		imageUrl: "https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/banner/%E7%94%BB%E6%9D%BF%203.png",
		success(res) {
			console.log('success(res)==', res);
			uni.showToast({
				title: '分享成功'
			})
		},
		fail(res) {
			console.log('fail(res)==', res);
			uni.showToast({
				title: '分享失败',
				icon: 'none'
			})
		}
	}
    },
	onShow() {
		this.locationAuth();
		if(!this.hasLogin){
			wx.hideShareMenu({
			  menus: ['shareAppMessage', 'shareTimeline']
			})
		}else{
			wx.showShareMenu({
			  menus: ['shareAppMessage', 'shareTimeline']
			})
		}
	},

	onReady() {
	},

	onPullDownRefresh() {
		this.getDatasByLoc('refresh', true);
		//this.getPositionList('refresh', true);
	},

	onReachBottom() {
		if(this.status!="没有更多")
			this.getDatasByLoc('add');
	},
	methods: {
		positionDetail(item) {
			this.$mRouter.push({
				route: this.$mRoutesConfig.positionDetail,
				query: {
					id: item.id
				}
			});
		},
		//关闭弹窗
		close(){
			this.$refs.popup.close();
		},
		getPosition() {
			console.log("=========获取定位信息========================")
			const that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(lb) {
							that.location = {
								latitude : lb.latitude,
								longitude : lb.longitude
							};
							getApp().globalData.location = that.location;
							getApp().globalData.currentLocation = JSON.parse(JSON.stringify(that.location));
							//保存到本地
							that.$db.set('location', that.location);
							that.getDatasByLoc();
				},
				fail: function(error) {
					console.log('=======error=========', error);
					that.getDatasByLoc();
				}
			});
		},
		//需要位置信息的
		getDatasByLoc(type = 'refresh', pulldown = false) {
			if (this.location) {
				this.query.latitude = this.location.latitude;
				this.query.longitude = this.location.longitude;
			} 
			this.getPositionList(type, pulldown);
		},
		async getBanners() {
			let param={
				current:1,
				number:10
			}
			let data=await this.$apis.getBanners(param);
			this.banner=data.banner.banners;
			this.noticeList=data.notice;
			
			var noticeId=uni.getStorageSync("noticeId");
			console.log(noticeId)
			if(!noticeId||noticeId!==this.noticeList[0].id){
				this.$refs.popup.open();
				uni.setStorageSync("noticeId",this.noticeList[0].id);
			}
			if(query.pcode){
				uni.setStorageSync('pcode', query.pcode);
			}
		},

		async getPositionList(type = 'refresh', pulldown = false) {
			this.status = '请求中';
			if (type == 'refresh') {
				this.query.current = 1;
			} else {
				this.query.current++;
			}
			let data = await this.$apis.getPostList(this.query);
			if (data) {
				if (type == 'refresh') {
					this.list = [];
				}
				if (pulldown) {
					uni.stopPullDownRefresh();
				}
				this.list = this.list.concat(data || []);
				this.changeStatus(data);
			}
		},

		// 修改请求状态
		changeStatus(data) {
			console.log(data)
			if (this.list.length === 0) {
				this.status = '暂无数据';
			} else if (this.query.number > data.length) {
				this.status = '没有更多';
			} else {
				this.status = '请求更多';
			}
		},

		handleClickGrid(o) {
			if (this.grid[o.index].path == "") {
				uni.showToast({ title: '暂未开放', icon: 'none' });
				return;
			}
			this.$mRouter.push({
				route: this.grid[o.index].path,
				query: {
					type: this.grid[o.index].type,
					text: this.grid[o.index].text
				}
			});
		},

		goItem(item) {
			console.log('goItem', item);
			
			this.$mRouter.push({
				route: this.$mRoutesConfig.noticeDetail,
				query: {
					id: item.id
				}
			});
		},

		goMore(item) {
			console.log('goMore', item);
			this.$mRouter.push({
				route: this.$mRoutesConfig.notices
			});
		},
		/**
		 * 位置授权
		 */
		locationAuth() {
			let that = this;
			uni.getSetting({
				success(res) {
					if (res.authSetting['scope.userLocation']) {
						console.log('userLocation位置功能已授权');
						that.getPosition();
						// 如果已授权,直接获取对应参数
					} else if (!res.authSetting['scope.userLocation']) {
						// 说明此时要获取的位置功能尚未授权,
						// 则设置进入页面时主动弹出，直接授权
						that.getDatasByLoc();
					}
				},
				fail() {
					console.log('获取授权信息授权失败');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.top {
	top: 0;
	width: 100%;
	image{
		 z-index:-1; 
		 width:100%; 
		 position: fixed; 
		 top:0; 
	}
}

.navbar {
	height: 100upx;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text {
		color: #000;
		font-weight: bolder;
	}
}
.notice {
	margin: 50upx 4% 30upx 4%;
	padding:0 5upx;
}

.post {
	margin-top: 10upx;
	background-color: #ffffff;
	border-bottom: 20upx solid $border-color-light;
	// border-top: 20upx solid $border-color-light;
	padding-bottom: 20upx;
	.title {
		// font-weight: bold;
		// font-size: $uni-font-size-lg;
		border-bottom: 1rpx solid #f8f8f8;
	}
	.post-list {
		overflow: hidden;
		white-space: nowrap;
		flex-wrap: wrap;
		width: 96%;
		padding: 2%;
	}
	.post-item {
		// background-color: #EEF2FE;
		border: 1upx solid $border-color-base;
		font-size: 28upx;
		float: left;
		width: 20%;
		padding: 10upx 1%;
		border-radius: 8upx;
		margin-top: 20upx;
		text-align: center;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.post-item-left {
		margin-left: 3%;
	}

	.all {
		margin-top: 10upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.all-text {
			color: $main-color;
			font-weight: bold;
		}
		.post-next {
			font-size: $font-size-34;
			color: $main-color;
			margin-left: 5upx;
		}
	}
}

.title {
	margin: 20upx 4% 20upx 4%;
	font-weight: bold;
	font-size: $font-size-34;
	line-height: 50upx;
	.bl{
		border-radius: 6upx;
		float:left;
		margin-right:20upx;
		background-color: #36B957;
		margin-top:5upx;
		height:40upx;
		width:10upx;
	}
		
}

.expect {
	padding: 25upx 2%;
	margin-top: 20upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	background-color: $bgcolor_white;
	border-bottom: 1upx solid $border-color-base;
	.items {
		width: 85%;
		padding: 0 3%;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		white-space: nowrap;
		align-items: center;
		text {
			padding: 0 10upx;
			font-size: $uni-font-size-lg;
			color: $font-color-base;
		}
		.selected {
			font-weight: bold;
			color: $font-color-000;
			font-size: $font-size-34;
		}
	}
	.expect-icon {
		size: $uni-font-size-lg;
		color: $font-color-gray;
		margin-right: 10upx;
	}
}
.load-more-box {
	// height: 120upx;
}
</style>
